<template>
	<view class="vipContainer">
		<view class="vipbalance">
			<view style="font-size: 12px;">账户余额</view>
			<view class="balance">￥{{info.vip_card_balance}}</view>
			<view class="jiaoyan">
				<view style="font-size: 14px;">退款金额：</view>
				<view style="margin: 10px 0;font-size: 14px;">￥{{info.vip_card_balance}}</view>
				<view style="font-size: 14px;">退款校验：</view>
				<view style="margin: 10px 0;font-size: 14px;">手机号：{{info.phone}}</view>
				<view style="margin: 10px 0;font-size: 14px;" class="payCode">
					验证码： 
					<input type="text" v-model="checkCode" placeholder="请输入验证码" /> 
					<view class="sendCode" @click="sendCode">{{time === 0?'获取验证码':time+'s后获取'}}</view>
				</view>
			</view>
			<view class="returnCode" @click="returnCard">退款</view>
		</view>
	</view>
</template>

<script>
	import { getUserInfo, closeVipCardSendsms, closeVipcard } from '@/api/home.js'
	export default {
		data() {
			return {
				time:0,
				checkCode:'',
				balance: '1000',
				info:{
					vip_card_balance:'',
					phone:''
				}
			}
		},
		onLoad(options) {
			this.balance = options.balance || '1000'
		},
		onShow() {
			getUserInfo().then(res=>{
				this.info = res.data
			})
		},
		methods:{
			returnCard() {
				closeVipcard({checkCode:this.checkCode}).then(res=>{
					if(res.code === 200) {
						uni.showToast({
							title: res.message,
							icon:'none'
						})
						setTimeout(()=>{
							uni.navigateBack({delta:1})
						},2000)
					}else{
						uni.showToast({
							title: res.message,
							icon:'none'
						})
					}
				})
			},
			sendCode() {
				if(this.time === 0) {
					closeVipCardSendsms({phone:this.info.phone}).then(res=>{
						if(res.code === 200) {
							this.countdown(60)
							uni.showToast({
								title: res.message,
								icon:'none'
							})
						}
					})
				}
			},
			countdown(seconds) {
				let that = this
			    const interval = setInterval(()=> {
					if (seconds === 0) {
					  clearInterval(interval);
					  that.time = 0
					} else {
						console.log(seconds,'seconds')
					  that.time = seconds
					  seconds--;
					}
			    }, 1000);
			}
		}
	}
</script>

<style scoped lang="less">
	.vipContainer{
		padding: 10px;
		box-sizing: border-box;
		.vipbalance{
			background-color: #fff;
			border-radius: 4px;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 40px 20px 30px;
			.balance{
				font-size: 16px;
				font-weight: bold;
				margin-top: 6px;
			}
			.returnCode{
				margin-top: 15px;
				background-color: #2c6cf4;
				color: #fff;
				padding: 10px 30px;
				border-radius: 6px;
				font-size: 12px;
			}
			.jiaoyan{
				width: 100%;
				text-align: left;
				margin-top: 15px;
				.payCode{
					display: flex;
					align-items: center;
					.sendCode{
						font-size: 12px;
						color: #2c6cf4;
					}
				}
			}
		}
	}
</style>